<template>
	<div id="app">
		<el-container>
			<el-header>
				<img src="~@/assets/logo.png" class="he__logo" alt="" />
				<img src="~@/assets/scdlr.png" class="he__logotext" alt="" />
			</el-header>
			<el-container class="con" style="height: calc(100vh - 113px);">
				<el-aside>
					<div ref="leftTop">
						<div style="display: flex;align-items: center;justify-content: space-between;padding-top: 10px;padding-right: 7px;">
							<el-radio-group v-model="radio1">
								<el-radio-button label="工序明细"></el-radio-button>
								<el-radio-button label="改箱数量"></el-radio-button>
							</el-radio-group>
							<el-button>列项</el-button>
						</div>
						<div class="home__top" style="margin-top: 13px;">
							<div class="home__top__btn" v-for='(item,index) in btnlist1' :key="index">{{item.text}}</div>
						</div>
					</div>
					<div :style="{height:`calc(100% - 67px - ${lefttopheight}px)`}">
						<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(100%)`"
							:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}' :cell-style="{color:'#1F163A',textAlign:'center'}">
							<el-table-column type="index" label="序" width="46">
							</el-table-column>
							<el-table-column prop="gx" label="工序">
							</el-table-column>
							<el-table-column prop="gxm" label="工序名" width="124">
							</el-table-column>
							<el-table-column prop="gh" label="工号" width="60">
							</el-table-column>
							<el-table-column prop="wgr" label="完工人" width="90">
							</el-table-column>
							<el-table-column prop="cf" label="拆分" width="60">
							</el-table-column>
						</el-table>
					</div>
					
					<div class="leftfooter" ref="leftfooter">
						<div>
							总共 327 条记录
						</div>
						<el-pagination small pager-count='3' background layout="prev, pager, next,jumper" :total="328">
						</el-pagination>
					</div>
				</el-aside>
				<el-main>
					<div class="mian__top" ref="mian__top">
						<div>
							<el-button v-for='(item,index) in btnlist' :key="index"
								:style="{color:item.color,background:item.bgcolor}">{{item.text}}</el-button>
						</div>
						
						<!-- el-icon-question -->
						<i class="el-icon-question" style="color: #5A86E9;font-size: 25px;justify-self: flex-end;margin-right: 20px;"></i>
					</div>
					<div class="mian__box" :style="{height:`calc(100% - 10px - ${mainTopheight}px)`}">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				radio1: '工序明细',
				btnlist1:[
					{
						text: '增加',
					},
					{
						text: '修改',
					},
					{
						text: '删除',
					},
					{
						text: '重置',
					},
					{
						text: '存盘',
					},
					{
						text: '放弃',
					}
				],
				btnlist: [{
						text: '增加',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '复制',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '修改',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '删除',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '保存',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '放弃',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '刷新',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '打印',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '输出',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '列项',
						bgcolor: '#dbe4fd',
						color: '#231918'
					},
					{
						text: '导入',
						bgcolor: '#ececec',
						color: '#4E6781'
					},
					{
						text: '导出',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '过滤',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '字母',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '图片',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '返回',
						bgcolor: '#dbe4fd',
						color: '#231918'
					},
				],
				btnlist: [{
						text: '增加',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '复制',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '修改',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '删除',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '保存',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '放弃',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '刷新',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '打印',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '输出',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '列项',
						bgcolor: '#dbe4fd',
						color: '#231918'
					},
					{
						text: '导入',
						bgcolor: '#ececec',
						color: '#4E6781'
					},
					{
						text: '导出',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '过滤',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '字母',
						bgcolor: '#ececec',
						color: '#4E6781'
					}, {
						text: '图片',
						bgcolor: '#dbe4fd',
						color: '#231918'
					}, {
						text: '返回',
						bgcolor: '#dbe4fd',
						color: '#231918'
					},
				],
				tableData:[
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
					{gx:1990,gxm:"不开通权限",gh:'',wgr:"",cf:'车间'},
				],
				curindex: '',
				mainTopheight: 0,
				lefttopheight:0,
				
			}
		},
		mounted() {
			// let height = this.$refs.mian__top.offsetHeight; //100
			this.mainTopheight = this.$refs.mian__top.offsetHeight
			this.lefttopheight = this.$refs.leftTop.offsetHeight
			let _this = this
			window.onresize = function() {
				_this.mainTopheight = _this.$refs.mian__top.offsetHeight
				_this.lefttopheight = _this.$refs.leftTop.offsetHeight
				// console.log(_this.lefttopheight)
			};
			
		},

	}
</script>
<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.el-header {
		background-color: #fff;
		height: 111px !important;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #EFEFEF;
		padding-left: 43px;

		.he__logo {
			width: 64px;
			height: 53px;
			// margin-left: 43px;
			margin-right: 5px;
		}

		.he__logotext {
			width: 331px;
			height: 32px;
		}
	}

	.el-aside {
		background-color: #fff;
		width: 653px !important;
		border-right: 2px solid #EFEFEF;
		padding-left: 43px;
	}

	.el-main {
		padding: 0 !important;
		background-color: #f1f4f6;
	}

	.con {}

	.dian {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		border: 3px solid #4A77F6;
		margin-right: 25px;
		justify-content: center;
		opacity: 0.39;
	}

	.el-submenu-title-1 {
		display: flex;
		align-items: center;
		font-size: 19px;
		padding-left: 20px;
	}

	.dian1 {
		width: 8px;
		height: 8px;
		background: #4E6781;
		border-radius: 4px;
		opacity: 0.5;
		margin-right: 5px;

	}

	.el-submenu .el-menu-item {
		font-size: 16px;
		padding-left: 90px !important;
	}

	.active {
		opacity: 1;
	}

	.lefttop {
		// width: 350px;
		height: 61px;
		background: #4A77F6;
		display: flex;
		align-items: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 21px;
		color: #FFFFFF;

		&__icon {
			width: 30px;
			height: 30px;
			margin-left: 44px;
			margin-right: 17px;
		}
	}

	.cz {
		padding: 27px 40px 0;

		&__item {
			display: flex;
			align-items: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 17px;
			color: #1E173C;
			line-height: 17px;
			margin-bottom: 25px;

			&__label {

				width: 92px;
			}
		}
	}

	.el-button+.el-button {
		margin-left: 2px;
	}

	.mian__top {
		background-color: #fff;
		padding-bottom: 5px;
		display: flex;
		justify-content: space-between;
	}

	.mian__box {
		width: calc(100% - 30px);
		padding: 15px;
		padding-bottom: 0;
	}
	.home__top {
		display: flex;
		align-items: center;
	
	}
	
	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}
	.leftfooter{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 0;
	}
</style>